<template>
	<view class="uni-column">
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 已接入实盘
			</view>
		</view>
		<view class="bg-white uni-column" v-if="keyList!=null&&isLoginOn">
			<view class="uni-row solid-bottom padding-sm text-center" v-for="(item,index) in keyList" :key="index">
				<view class="flex-sub pad">
					{{item.name}}
				</view>
				<view class="flex-sub">
					<text class="lg text-sm" :class="item.actived?'cuIcon-activityfill text-blue':'cuIcon-activity text-grey'"></text>
				</view>
				<view class="flex-sub">
					<view class="cu-capsule round">
						<view class='cu-tag bg-blue '>
							{{item.platform}}
						</view>
						<view class="cu-tag line-blue">
							{{item.lastDays}} 天
						</view>
					</view>
				</view>
				<view class="flex-sub"><button class="cu-btn bg-orange round sm" @click="resetData(item.id)">重置实盘</button></view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-gradual-blue lg" @tap="toDetail" v-if="isLoginOn">新增授权</button>
			<button class="cu-btn block bg-blue  " v-else @tap="toLogin">登录/注册</button>
		</view>
	</view>
</template>

<script>
	var _self
	export default {
		props: {
		    isLoginOn:false,
			keyList: null
		},

		mounted() {
			_self = this
		},

		methods: {
			toDetail() {
				console.log(_self.keyList)
				uni.navigateTo({
					url: './addkey_detail'
				});
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			resetData(id) {
				uni.request({
					url: this.api + '/credentials/accounts/' + id,
					method: 'PUT',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log('reset data is ')
						console.log(res)
						if (res.data.code == '200000') {
							uni.showToast({
								title:'添加成功'
							})							

						} else {
							title:'添加失败'							
						}
						_self.$emit("loadAccount")
					}
				});
			}

		}
	}
</script>
<style>
	.title {
		min-width: calc(4em + 15px);
	}
</style>
